<template>
  <div class="noList">
    <div class="img_no">
    </div>
    <span :class="color">暂无相关数据显示</span>
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'black'
    }
  }
}
</script>

<style lang="css" scoped>
.noList {width: 100%; margin:2rem auto 0;}
.noList .img_no {
  width: 180px;
  height: 180px;
  margin: auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../../images/no.gif');
  /* animation: noData 1s infinite; */
}
/* @keyframes noData {
  0% {
    background-image: url(../images/no_01.png);
  }
  50% {
    background-image: url(../images/no_02.png);
  }
  100% {
    background-image: url(../images/no_03.png);
  }
} */
/*@keyframes noData {
  0% {
    background-image: url(../images/no_01.png);
  }
  10% {
    background-image: url(../images/no_02.png);
  }
  20% {
    background-image: url(../images/no_01.png);
  }
  30% {
    background-image: url(../images/no_02.png);
  }
  40% {
    background-image: url(../images/no_01.png);
  }
  50% {
    background-image: url(../images/no_02.png);
  }
  60% {
    background-image: url(../images/no_03.png);
  }
  100% {
    background-image: url(../images/no_03.png);
  }
}*/
/* .noList img {width: 100%;display: block;} */
.noList span {
  margin: 1rem auto 3rem;
  display: block;
  font-size: 1rem;
  text-align: center;
}
.noList span.black {
  color: #999;
}
.noList span.white {
  color: #fff;
}
</style>
